<template >
    <div id="box">

        <div class="box-rule">
            <h2>在线教育管理系统</h2>

            <!-- 验证框 -->
            <div class="inp-box">

                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                    status-icon>

                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="省份" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择身份">
                            <el-option label="管理员" value="shanghai"></el-option>
                            <el-option label="员工" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                <div class="btn-box">
                    <el-button class="dlbtn" type="primary">注册</el-button>
                </div>

            </div>

        </div>
    </div>
</template>
<script>
import {getuser} from "../api/api"
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {

            ruleForm: {
                  
            },

            rules: {
                name: [
                    { required: true, message: '请填写用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 5 到 30个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                // pass: [
                //     { required: true, message: '请填写密码', trigger: 'blur' },

                // ],
                // checkPass: [
                //     { required: true, message: '请再次填写密码', trigger: 'blur' },

                // ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择身份', trigger: 'change' }
                ],
            }
        }
    },
    methods: {

    },
    created() {
   
          
    },
}
</script>
<style lang="scss">
#box {
    padding-top: 1px;
    background-color: #2d3a4b;
    height: 100vh;
    width: 100%;


}

.el-form-item__label {
    color: #fff;
}

.box-rule {
    width: 450px;


    margin: 200px auto;

    h2 {
        color: #fff;
        text-align: center;

    }
}

.dlbtn {
    width: 350px;
    margin-left: 100px;

}
</style>